<template>
	<div class="writeform">
		<form class="form-cont">
			<div class="form-title clearFix">
				<p>基本信息</p>
			</div>
			<div class="form-basetop clearFix">
				<div class="form-half">
					<p>汇报人：</p>
					<span>{{empName}}</span>
				</div>
				<!-- <div class="form-half">
					<p>部门：</p>
					<span>{{depName}}</span>
				</div> -->
			</div>


			<div class="form-baseinput">
				<!-- <div class="form-group formline">
					<label>事发时间：</label>
					<input type="date" name="s2oType" required placeholder="事发时间" v-model="list.s2oTime" class="form-control">
				</div> -->
				<div class="form-group formline">
					<label style="width:28%;float:left;">安全海报主题：</label>
					<textarea rows="2" type="text" name="s2oType" v-model="list.s2oType" style="width:65%;resize:none;margin-top: 7px;" required class="form-control" placeholder="一句话表达你想分享的内容(必填)" tips="安全海报主题" ></textarea>
				</div>
			</div>


			<div class="form-textarea">
				<div class="form-title clearFix">
					<p>事件描述</p>
				</div>
				<div class="form-group">
					<textarea name="s2gDescribe" rows="3" v-model="list.s2gDescribe" required class="form-control" placeholder="时间、地点、发生了什么事、有何影响(必填)" tips="事件描述"></textarea>
				</div>
				<div class="form-title clearFix">
					<p>当时采取的措施</p>
				</div>
				<div class="form-group">
					<textarea name="s2gStep" rows="3" v-model="list.s2gStep" required tips="当时采取的措施" class="form-control" placeholder="当时采取的措施(必填)"></textarea>
				</div>
				<div class="form-title clearFix">
					<p>值得分享的经验与教训</p>
				</div>
				<div class="form-group">
					<textarea name="s2gShare" rows="3" v-model="list.s2gShare" required tips="经验与教训" class="form-control" placeholder="经验或教训(必填)"></textarea>
				</div>
			</div>


			<div class="form-title clearFix">
				<p>相关照片</p>
			</div>
			<div class="form-group uploadimage" id="uploadimage">
				<ul>
					<li v-for="img in imgs" @click="previewImg(img)">
						<img :src="img" />
						<i class="ion ion-ios-close" v-if="$route.query.state != 1 && $route.query.state != 2" @click.stop.prevent="delImg(img,index)"></i>
					</li>
					<li>
						<a class="companypic" id="chooseImages" @click="getSig()" v-if="$route.query.state != 2 && $route.query.state != 1 && imgs.length < 6">
			        		<i class="ion ion-android-add fontcompany"></i>
			        		<!-- <span class="bluecolor block">点击上传照片</span> -->
			        	</a>
		        	</li>
					
				</ul>
	        	
       		</div>
       		<div class="savebtn" v-if="$route.query.state != 1 && $route.query.state != 2">
	       		<button type="button" class="" @click="savenm(0)">保存</button>
	       		<button type="button" class="" @click="savenm(1)">保存并提交</button>
	   		</div>
		</form>
		<loading v-if="loadShow"></loading>
		<toast v-if="toastShow" :message="tipMessage"></toast>
		<transition name="slide">
	      <tips v-show="tipsShow" :tips="tipsMessage"></tips>
	    </transition>
	</div>
</template>

<script type="text/javascript">

	import wx from 'weixin-js-sdk'

	import jssdk from '../../assets/js/jssdk/wxJSSDK'

	import safeUrl from '../../assets/js/insterface'

	import vaild from '../../assets/js/vaild_form'

	import http from '../../assets/js/http_mixin'

	export default {
		data () {
			return {
				isSubmit:true,// 防止保存和提交短事件内触发多次
				empName:'',
				depName:'',
				tipMessage:'',
				list:{
					id:'',
					depId:'',
					empNo:'',
					s2oTime:'',
					s2oType:'',
					s2gDescribe:'',
					s2gStep:'',
					s2gShare:'',
					s2gImg:'',
					state:0
				},
				
				imgs:[],
				missImgs:[],
				
				idx:0,
				idx2:0
			}
		},
		mixins:[jssdk, http, vaild],
		mounted() {
			document.title="Safe2go";
			this.list.empNo = this.$route.query.empNo;
			this.selectData();
			this.init();
			// alert(window.location.href)
		},
		methods: {
			selectData() {
				this.$http.post(safeUrl.stgSelectData,{empNo:this.list.empNo},{emulateJSON: true})
				.then((response) =>{
					if(response.data.evo){
						const dataevo = response.data.evo;

						this.empName = dataevo.employeeName;
						this.depName = dataevo.depName;

						const d = new Date();
						this.list.s2oTime = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();

						this.list.depId = dataevo.depId;

						this.enterData();
						console.log(response.data)
					}
				})
				.then(function(response){
					console.log(response)
				})
			},
			enterData(){
				// debugger;
				if(this.$route.query.state){
					this.getData();
					var form = document.forms[0]; 
					for ( var i = 0; i < form.length; i++) { 
						var element = form.elements[i]; 
						element.disabled = true; 
					} 
				}else if(this.$route.query.state == 0){
					this.getData();
				}
			},
			getData(){
				this.$http.post(safeUrl.stgDetail,{nId:this.$route.query.id},{emulateJSON: true})
				.then((response) =>{
					this.list.id = response.data.id;
					this.list.depId = response.data.depId;
					this.empName = response.data.empName;
					this.depName = response.data.depName;
					this.list.s2oTime = response.data.s2oTime;
					this.list.s2oType = response.data.s2oType;
					this.list.s2gDescribe = response.data.s2gDescribe;
					this.list.s2gStep = response.data.s2gStep;
					this.list.s2gShare = response.data.s2gShare;
					if(response.data.s2gImg != "" && response.data.s2gImg != null){
						const imgArr = response.data.s2gImg.split(",")
						for(var j=0; j<imgArr.length; j++){
							this.missImgs.push(imgArr[j]);
						}
						this.imgs = imgArr;
					}
					console.log(response.data)
				})
				.then(function(response){
					console.log(response)
				})
			},
			getSig() {
				var vue = this;
				var chooseImageID = [];
				var imageId = document.getElementById('chooseImages');
				this.imageApi({
					chooseImage:{
						count:6 - vue.imgs.length,
						success:function(res){
							chooseImageID = res.localIds;
							if(chooseImageID[0].toString().indexOf("wxLocalResource") != -1){
								vue.getLocalImg(chooseImageID);    
							}else{
								for(var i=0; i<chooseImageID.length; i++){
									vue.imgs.push(chooseImageID[i]);
								}
							}
							// vue.imglength = vue.imgs.length;
							vue.syncUpload(chooseImageID);
							console.log("gongsi------------" + chooseImageID);
						}
					}
				})
			},
			getLocalImg(eve){
		        var _this = this;
		        _this.imageApi({
					getLocalImgData:{
						localId: eve[_this.idx2].toString(),
						success: function (res) {
							_this.idx2++;
							_this.imgs.push(res.localData.toString());
							if (_this.idx2 < eve.length) {
								_this.getLocalImg(eve);   
							} else {
								_this.idx2 = 0;
							}
						}
					}
		        });    
		    },
			previewImg(img) {
				var vue = this;
				this.imageApi({
					previewImage:{
						current:img,
						urls:vue.imgs
					}
				})
			},
			syncUpload (localIds){
				var vue = this;
				this.imageApi({
					uploadImage:{
						localId:localIds[vue.idx].toString(),
						success:function(res){
							vue.idx++;
							vue.missImgs.push(res.serverId);
							if(vue.idx<localIds.length){
								vue.syncUpload(localIds);
							}else{
								vue.idx = 0;
							}
						}
					}
				})
			},
			savenm(e) {
				if(e == "1"){
					var oInput = document.forms[0].elements;
			        if (!this.vaildForm(oInput)) {
			          return false
			        }
		        }
				var vue = this;
				this.list.state = e;
				this.list.s2gImg = this.missImgs.join(",");
				//保存操作
				if(this.isSubmit){
					this.isSubmit = false;
					setTimeout(function (){
						this.isSubmit= true;
					},2000);
					
					this.getInfo({
						url:safeUrl.stgSendData,
						param:this.list,
						success:function(response){
							vue.toastShow = true;
							vue.tipMessage = response.data.msg;
							setTimeout(function(){
								vue.toastShow = false;
								window.history.go(-1);
							},1500);
							console.log(response.data)
						},
						fail:function(response){

						}
					})
				}	
			},
			delImg(img,i) {
				this.missImgs.splice(i,1);
				this.imgs.splice(i,1);
			}
		}
	}
</script>